/*
1.1版本缺陷：
1.无封装性
2.重复性代码较多，每增加一个字段都要增加相应的函数
3.无可移植操作
*/

//验证表单的配置文件
const formOption = {
    fieldOption: {
        realName: {
            selector: '#real-name',
            errorTip: '姓名不符合规范',
            successTip: '姓名OK了',
            reg: /^[\u4e00-\u9fa5]{2,6}/
        },
        email: {
            selector: '#email',
            errorTip: '邮箱错误',
            successTip: '邮箱OK了',
            reg: /^[A-Za-z0-9]\w+@\w{2,}\.[a-zA-Z]{2,4}/
        }
    },
    formSelector: 'form',
    submitSelector: '#submit'
}

function ValiForm(formOption) {
    const self = this

    //初始化所有字段
    this.initFields = function () {
        this.fields = Object.keys(formOption.fieldOption)

    }
    //初始化验证结果
    this.initValiRes = function () {
        let valiRes = {}
        this.fields.forEach(function (field) {
            valiRes[field] = false
        })
        this.valiRes = valiRes
    }

    //初始化字段对应的输入框，表单，提交按钮
    this.initElemnt = function () {
        const formSelector = formOption.formSelector
        this.formElement = document.querySelector(formSelector)
        const submitSelector = formOption.submitSelector
        this.submitElement = this.formElement.querySelector(submitSelector)
        let iptEle = {}
        this.fields.forEach((field) => {
            console.log(this)
            let selector = formOption.fieldOption[field].selector
            iptEle[field] = this.formElement.querySelector(selector)
        })
        this.iptEle = iptEle
    }

    this.valiField = function (field) {
        const value = this.iptEle[field].value
        const fieldRegRule = formOption.fieldOption[field].reg
        this.valiRes[field] = fieldRegRule.test(value)
        console.log(`${field}字段验证结果为：${this.valiRes[field]}`)
        this.hanldeFieldTip(field)
    }

    this.hanldeFieldTip = function (field) {
        const helpEle = this.iptEle[field].nextElementSibling
        const formGroupEle = this.iptEle[field].parentElement
        const successTip = formOption.fieldOption[field].successTip
        const errorTip = formOption.fieldOption[field].errorTip
        const tip = this.valiRes[field] ? successTip : errorTip
        helpEle.innerText = tip
        if (this.valiRes[field]) {
            //如果验证正确
            formGroupEle.classList.add('success')
            formGroupEle.classList.remove('error')
        } else {
            formGroupEle.classList.remove('success')
            formGroupEle.classList.add('error')
        }
    }

    //绑定事件
    this.bindEvent = function () {
        //给所有字段对应的输入框绑定onchange事件
        for (let field in this.iptEle) {
            const curIpt = this.iptEle[field]
            // curIpt.onchange = function () {
            //     self.valiField(field)
            // }
            curIpt.onchange = () => {
                this.valiField(field)
            }
        }
        // this.submit.onclick = self.handleSubmit
        //绑定this.handleSubmit调用的时候的this值
        this.submitElement.onclick = this.handleSubmit.bind(this)
    }

    //处理表单的提交
    this.handleSubmit = function (e) {
        e.preventDefault();
        //如果表单验证不通过
        if (!this.valiForm()) {
            //阻止表单提交
            e.preventDefault();
            //聚焦我的第一个未通过字段
            this.focusErrorField()
        }
    }
    //根据传入的字段聚焦到该字段对应的输入框，并且调用验证该字段的函数
    this.focusField = function (field) {
        this.iptEle[field].focus()
        this.valiField(field)
    }
    //聚焦到第一个验证失败的字段对应的输入框，然后返回第一个失败的字段
    this.focusErrorField = function () {
        for (let field of this.fields) {
            if (!this.valiRes[field]) {
                this.focusField(field)
                return field
            }
        }
    }
    this.valiForm = function () {
        for (key in this.valiRes) {
            if (!this.valiRes[key]) {
                return false
            }
        }
        return true
    }

    this.initFields()
    this.initValiRes()
    this.initElemnt()
    this.bindEvent()
}
const vf = new ValiForm(formOption)